<template>
  <div>
    <!-- :class='对象/数组' -->
    <!-- :style='对象/数组' -->
    <h1>动态设置class和style</h1>
    <!-- 
      class动态设置
      如果设置对象 属性是true的话 列名会加上这个属性
      false就不加 并且不会影响原先的class

      如果设置数组 数组里有什么就会加什么

      数组啊对象啊能够嵌套
     -->
    <div class="box" :class="{ a: true, b: false }"></div>
    <hr />
    <div class="box" :class="classObjA"></div>
    <hr />
    <div class="box" :class="['aaa', 'bbb', 'ccc']"></div>
    <hr />
    <div class="box" :class="['xxx', { yy: false, zz: true }]"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classObjA: {
        c: false,
        d: false,
        e: true,
      },
    };
  },
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: pink;
}
</style>